<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul,li{
		list-style: none;
	}
     #box{
     	width:400px;
     	height:500px;
        border: 1px solid red;
        margin:0 auto;
     }
    #tabs{
     	/*width: 70px;
     	height: 35px*/;
     
     }
     #tabs li{
        float:left;
      	width: 70px;
      	height: 35px;
      	margin-right: 10px;
      	border: 1px solid #ccc;
      	line-height: 35px;
        text-align: center;	
        background: #ccc;
      }
      #tabs li a{
        font-weight:bold;
      	text-decoration: none;
      }
      #x div{
      	display: none;
      }
     
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var Otabs = document.getElementById("tabs");
			var Oli = Otabs.getElementsByTagName("li");
			var Ox = document.getElementById("x");
			var Odiv = Otabs.getElementsByTagName("div");
			for (var i = 0 ; i < Oli.length; i++){
				//Oli.onmouseover = function () {
					Oli[i].index = i;
					Oli[i].onmouseover = function () {
						for (var j = 0; j < Oli.length; j++) {
							Oli[j].className = "";
							Odiv[j].style.display = "none";
						}
						Odiv[this.index].style.display = "block";
						this.className = "x"
					}
				
			}
		}
	</script>
</head>
<body>
	<div id="box">
		<ul id="tabs">
			<li>
			<a href="javascript:;;">js</a>
			</li>
			<li>
			<a href="javascript:;;">jq</a>
			</li>
			<li>
			<a href="javascript:;;">php</a>
			</li>
			<li>
			<a href="javascript:;;">ps</a>
			</li>
		</ul>
		<div style="clear:both"></div>
		<div id="x">
			<div style="display: block">
				1
			</div>
			<div>
				2
			</div>
			<div>
				3
			</div>
			<div>
				4
			</div>
		</div>
	</div>
</body>
</html>